<template>
  <div class="profile-layout">
    <div class="box-width contianer">
      <div class="row">
        <div class="col-10 offset-2">
          <div class="user-layout clearfix">
            <img :src="wechatAccount ? wechatAccount.headimgurl : 'http://qiniu.prod.fita-club.com/agent-avatar.png'" class="cover">
            <div class="name">{{agent.name}}</div>
          </div>
        </div>
        <div class="col-2">
          <div class="tab">
            <div style="font-size: 18px; font-weight: bold; color: #646464;">全部功能</div>
            <a class="alink" @click="changeOrderStatus('UNPAID')" :class="orderStatus === 'UNPAID' ? 'active' : ''">待支付</a>
            <a class="alink" @click="changeOrderStatus('PAID')" :class="orderStatus === 'PAID' ? 'active' : ''">已支付</a>
            <a class="alink" @click="changeOrderStatus('CONSUMED')" :class="orderStatus === 'CONSUMED' ? 'active' : ''">已完成</a>
          </div>
        </div>
        <div class="col-10">
          <div class="order-list">
            <table class="table ft-table order-table text-center">
              <thead>
                <tr>
                  <td>订单产品</td>
                  <td>取还车城市</td>
                  <td>取还车时间</td>
                  <td>订车总价</td>
                  <td style="min-width: 90px;">订单状态</td>
                  <td style="min-width: 100px">操作</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="o in orders" :key="o.id">
                  <td class="text-left" style="padding-left: 30px;">
                    <span>订单号：{{o.code}}</span>
                    <span>预定时间：{{o.pickup_date}}</span>
                  </td>
                  <td class="text-left location-td">
                    <span>取车：{{o.pickup_location_name}}</span>
                    <span>还车：{{o.return_location_name}}</span>
                  </td>
                  <td class="text-left">
                    <span>取车：{{o.pickup_date}}</span>
                    <span>还车：{{o.return_date}}</span>
                  </td>
                  <!--   到付               -->
                  <td v-if="o.type === 'ARRIVEPAY'">{{exchangeRates[o.currency_code].currency_symbol + o.agent_commission}}</td>
                  <td v-else-if="o.type === 'PREPAY'">{{'￥' + o.cny_pay_price + '.00'}}</td>
                  <td v-else></td>
                  <td>{{o.stauts_desc}}</td>
                  <td class="alink">
                    <router-link :to="{name: 'order-detail', params: {orderId: o.id}}">查看订单</router-link>
                    <router-link v-if="o.pay_status === 'UNPAID' && o.status === 'UNPAID' && o.type !== 'ARRIVEPAY'" :to="{path: '/order-paid?id='+ o.id}" style="display: block;"> | 支付</router-link>
                    <b-button
                      v-if="!o.invoice_status && orderStatus != 'UNPAID' && (o.stauts_desc === '已支付' || o.stauts_desc === '已核销') && ((agent.district.id === 2) || (o.order_pay_type != 'OFFLINE'))"
                      variant="link"
                      @click="showModal(o.id)"
                      style="color: #a1781e; font-size: 14px; display: block; margin: 0 auto; padding: 0; vertical-align: initial;">开票</b-button>
                    <span v-if="o.invoice_status === 'CREATED' && orderStatus != 'UNPAID'" class="order-cancel">开票中</span>
                    <span v-if="o.invoice_status === 'MAKED' && orderStatus != 'UNPAID'" >已开票</span>
                    <span v-if="o.invoice_status === 'REDMAKED' && orderStatus != 'UNPAID'" >已开红票</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <b-modal id="modal-center" ref="invoice-modal" ok-only ok-title='关闭' centered title='发票'>
      <div v-if="showLoadingText" style="position: absolute; width: 100%; top: 20px; left: 0;text-align: center; line-height: 132px; font-size: 12px;">
        <div style="width: 132px; height: 132px; background: #f7f7f7; margin: 0 auto;">二维码生成...</div></div>
      <div id="qrcode"></div>
      <p style="text-align: center;margin-top: 5px;">请用微信扫当前二维码！</p>
    </b-modal>
  </div>
</template>

<script src="./profile.js"></script>

<style scoped>
  a {
    cursor: pointer;
    color: #a1781e;
    text-decoration: none;
  }

  .order-table td,
  .order-table th {
    vertical-align: middle !important;
  }

  .location-td span {
    display: block;
    width: 240px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }

  .order-list span {
    display: block;
    margin: 0 auto;
  }

  #qrcode {
    width: 132px;
    height: 132px;
    margin: 0 auto;
  }
</style>
